import React from 'react'
import { Route, Switch } from 'react-router-dom'
import '../../../assets/css/search.css'
import HotUI from '../../Hot/HotUI'
import HotSelect from '../../Hot/Hot-select'
import SynchronizedSearch from '../../SynchronizedSearch/SynchronizedSearch'
import BestMatch from '../../Hot/BestMatch/BestMatch'

// 此组件为SearchBarExample的子组件
class SearchBarExampleSon extends React.Component {
    constructor() {
        super()
        this.state = {
            val: ''
        }
    }
    // 改变val初始值
    changeVal(input) {
        this.setState({
            val: input
        })
    }
    render() {
        // console.log(this.props);
        // console.log(this.state.val);
        // 判断输入框里的值是否为空
        if (!this.props.state) {
            return (<Switch>
                <Route path='/search' exact children={() => {
                    return (<div>
                        {/* props向下传递 */}
                        <div className='mxx_searchBox'>
                            <div className='mxx_hotSearch'>热门搜索</div>
                            <HotUI {...this.props} changeVal={this.changeVal.bind(this)} />
                        </div>
                        <HotSelect {...this.props} changeToVal={this.changeVal.bind(this)} />
                    </div>)
                }} />
                <Route path='/search/bestMatch' exact children={() => {
                    return (
                        <BestMatch {...this.props} state={this.state.val} />
                    )
                }} />
            </Switch>);
        } else {
            return (<Switch>
                <Route path='/search' exact children={() => {
                    return (
                        <SynchronizedSearch {...this.props} turnVal={this.changeVal.bind(this)} />
                    )
                }}
                />
                <Route path='/search/bestMatch' exact children={() => {
                    return (
                        <BestMatch {...this.props} state={this.state.val} />
                    )
                }} />
            </Switch>
            );
        }
    }
}

export default SearchBarExampleSon